<template>
  <div>
      <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
        <el-row>
            <el-col >
                <el-button type="primary" @click="showAddCateDialog()">添加分类</el-button>
            </el-col>

        </el-row>
        <!-- 表格 -->
        <tree-table class="treeTable"  border :data="catelist" :columns="columns"
        :selection-type="false" index-text="#" :show-index="true" :expand-type="false">
          <!-- eslint-disable-next-line -->
          <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
            <i class="el-icon-check" v-if="scope.row.cat_deleted===false" style="color:orange"></i>
            <i class="el-icon-close" v-else style="color:red"></i>
        </template>
        <!-- 排序 -->
        <!-- eslint-disable-next-line -->
        <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <!-- 操作 -->
        <!-- eslint-disable-next-line -->
        <template slot="opt" slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditDialog(scope.row.cat_id)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>
            
        </template>

        </tree-table>
        <!-- 分页区域 -->
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 添加分类的对话框 -->
    <el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close="addCateClosed"
  >
  <!-- 添加分类的表单 -->
  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类" >
    <!-- options用来指定数据源 -->
    <!-- props用来指定配置对象 -->
    <el-cascader
    v-model="selectedKeys"
    expand-trigger='hover'
    :options="parentCateList"
    :props="cascaderProps"
    @change="parentCateChange"
    clearable
    change-on-select
    ></el-cascader>
  </el-form-item>
  </el-form>
  
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
    <!-- 编辑分类的对话框 -->
     <el-dialog
      @close="editDialogClosed"
      title="编辑分类"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false"> 取 消 </el-button>
        <el-button type="primary" @click="editCateInfo"> 确 定 </el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
data(){
    return{
        //查询条件
        queryInfo:{
            type:3,
            pagenum:1,
            pagesize:5
        },
        //商品分类的数据列表 默认为空
        catelist:[],
        //总数据条数
        total:0,
        //为table指定列的定义
        columns:[{
            label:'分类名称',
            prop:'cat_name'
        },{
            label:'是否有效',
            //表示将当前列定义为模板列
            type:'template',
            //表示当前这一列的模板名称
            template:'isok'
        },{
            label:'排序',
            //表示将当前列定义为模板列
            type:'template',
            //表示当前这一列的模板名称
            template:'order'
        }
        ,{
            label:'操作',
            //表示将当前列定义为模板列
            type:'template',
            //表示当前这一列的模板名称
            template:'opt'
        }
        ],
        //控制对话框的显示
        addCateDialogVisible:false,
        //添加分类的表单数据对象
        addCateForm:{
            //将要添加的分类的名称
            cat_name:'',
            //父级分类的ID
            cat_pid:0,
            //分类的等级，默认添加的是一级分类
            cat_level:0
        },

        editForm: {},
        //添加分类表单的验证规则对象
        addCateFormRules:{
            cat_name:[
                {required:true,message:'请输入分类名称',triggle:'blur'},
            ],
        },
        //父级分类的列表
        parentCateList:[],
        //指定级联选择器的配置对象
        cascaderProps:{
            value:'cat_id',
            label:'cat_name',
            children:'children'
        },
        //选中的父级分类的id数组
        selectedKeys:[],
          //添加表单验证规则对象
      addFormRules: {
        catName:[  { required: true, message: "请输入分类名称", trigger: "blur" },]
      },
    }
},
created(){//获取商品数据
this.getCateList()
},
methods:{
    async getCateList(){
      const {data:res}= await this.$http.get('categories',{params:this.queryInfo})
        if(res.meta.status!==200){
            return this.$message.error('获取商品分类失败')
        }
        //把数据列表赋值给catelist
        this.catelist=res.data.result
        //为总数据条数赋值
        this.total=res.data.total
    },
    //监听 pagesize 改变
    handleSizeChange(newSize){
        this.queryInfo.pagesize=newSize
        this.getCateList()
    },
    //监听 pagenum 改变
    handleCurrentChange(newPage){
        this.queryInfo.pagenum=newPage
        this.getCateList()
    },
    //点击按钮展示添加分类对话框
    showAddCateDialog(){
        //获取父级分类列表
        this.getParentCateList()
        //展示对话框
        this.addCateDialogVisible = true
    },
    //获取父级分类的数据列表
    async getParentCateList(){
       const {data:res} = await this.$http.get('categories',{params:{type:2}})
        if(res.meta.status!==200)
        {
            return this.$message.error('获取失败')
        }
        this.parentCateList=res.data
    },
    //选择项发生变化触发这个函数
    parentCateChange(){
        //console.log(this.selectedKeys)
        //如果selectedKeys数组中的length大于0 证明选中了父级分类
        //反之就没有选择任何父级分类
        if(this.selectedKeys.length>0){
            //父级分类的id
            this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length-1]
            //为当前分类的等级赋值
            this.addCateForm.cat_level=this.selectedKeys.length
            return
        }else{
             //父级分类的id
            this.addCateForm.cat_pid=0
            //为当前分类的等级赋值
            this.addCateForm.cat_level=0
        }
    },
    //点击按钮添加新分类
    addCate(){
        this.$refs.addCateFormRef.validate(async valid=>{
            if(!valid)return this.$message.error('校验失败')
            const {data:res} = await this.$http.post('categories',this.addCateForm)
            if(res.meta.status!==201){
                return this.$message.error('添加分类失败')
            }
            this.$message.success('添加分类成功')
            //刷新列表
            this.getCateList()
            this.addCateDialogVisible=false
        })
    },
    //监听对话框的关闭事件 重置数据
    addCateClosed(){
        this.$refs.addCateFormRef.resetFields()
        this.selectedKeys=[]
        this.addCateForm.cat_level=0
        this.addCateForm.cat_pid=0

    },
    //根据Id删除对应分类信息
    async removeCateById(id){
         //弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该分类, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      //如果用户确认删除，则返回值为字符串confirm
      //如果用户取消删除。则返回值为字符串cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
        const {data:res} =await this.$http.delete('categories/'+id)
        console.log(id)
      if(res.meta.status!==200){
          return this.$message.error('删除用户失败')
        }
      this.$message.success("删除分类成功")
      this.getCateList() 
    },
    //展示编辑分类的对话框
    async showEditDialog(id){
 // console.log(id)
      const { data: res } = await this.$http.get("categories/" + id);

      if (res.meta.status !== 200) {
        return this.$message.error("查询分类信息失败！");
      }

      this.editForm = res.data;
      this.editDialogVisible = true;
    },
    //监听编辑分类对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    //修改角色信息并提交
    editCateInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        //console.log(valid);
        if (!valid) return this.$message.error("校验不通过");

        //发起修改角色信息的数据请求
        const { data: res } = await this.$http.put(
          "categories/" + this.editForm.cat_id,
          {
            cat_name: this.editForm.cat_name,}
           
        )
        if (res.meta.status !== 200) {
          return this.$message.error("更新角色失败");
        }
        //关闭对话框
        this.editDialogVisible = false;
        //刷新数据列表
        this.getCateList();
        //提示修改成功
        this.$message.success("修改成功");
      });
    },
}
}
</script>

<style lang="less" scoped>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}

</style>